<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>素材中心</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item>素材中心</el-breadcrumb-item>
                    <el-breadcrumb-item>图片</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="resource-image" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>

        <div class="page-main">
            <div class="admin-panel padding-20">
                <div style="margin: 10px 0">
                    <el-button size="small" type="primary" @click="showUploadImageDialog">上传图片</el-button>
                </div>

                <el-table :data="image.list" stripe border>
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column label="图片" min-width="200">
                        <template slot-scope="scope">
                            <image :src="scope.row.url" style="width: 160px"></image>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" min-width="240">
                        <template slot-scope="scope">
                            <h3>{{scope.row.name}}</h3>
                        </template>
                    </el-table-column>
                    <el-table-column label="大小" width="140">
                        <template slot-scope="scope">
                            {{scope.row.size | size}}
                        </template>
                    </el-table-column>
                    <el-table-column label="上传时间" width="140" align="center">
                        <template slot-scope="scope">
                            {{scope.row.createdTime | date}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-link type="primary" size="small" @click="viewResource(scope.row)" :underline="false" style="margin-right: 20px">预览</el-link>
                            <el-popconfirm title="确定删除吗？" @confirm="deleteResource(scope.row)">
                                <el-link slot="reference" type="danger" size="small" :underline="false">删除</el-link>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination :current-page="image.page"
                               :page-size="image.size"
                               :total="image.total"
                               :hide-on-single-page="true"
                               @current-change="loadImage"
                               layout="total, prev, pager, next, jumper"
                               class="mm_pagination"
                               background>
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog title="上传图片（最多一次上传5张图片）" :visible.sync="uploadImageDialog.show" width="450px" :close-on-click-modal="false" :before-close="hideUploadImageDialog">
        <div>
            <el-upload
                    ref="imageUploader"
                    action="/admin/resource/image/upload"
                    accept="image/jpeg,image/png"
                    list-type="picture"
                    :on-change="onImageChange"
                    :on-error="onUploadFail"
                    :multiple="true"
                    :limit="5"
                    :auto-upload="false">

                <el-button slot="trigger" size="small" type="primary" style="margin-right: 10px;">选取文件</el-button>
                <el-button size="small" type="success" @click="uploadImage">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传 JPG 或 PNG 文件，且不超过 20M</div>

            </el-upload>
        </div>
    </el-dialog>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            image: {},
            uploadImageDialog: {
                show: false,
                fileList: []
            }
        },
        methods: {
            loadImage: function (page = 1) {
                let vue = this;

                axios.get(`/admin/resource/image/list?page=${page}&size=10`).then(resp => {
                    vue.image = resp.data || {};
                });
            },
            showUploadImageDialog: function () {
                this.uploadImageDialog.show = true;
            },
            hideUploadImageDialog: function (done) {
                this.uploadImageDialog.show = false;
                this.$refs.imageUploader.clearFiles();

                if (done && typeof done === 'function') {
                    done();
                }
            },
            onImageChange: function (file, fileList) {
                let vue = this;

                const isImage = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
                const isLt20M = file.size / 1024 / 1024 < 20;

                if (!isImage) {
                    this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                    fileList.pop();
                } else if (!isLt20M) {
                    this.$message.error('上传图片不能超过 5MB!');
                    fileList.pop();
                    // } else {
                    //     vue.uploadImageDialog.fileList = fileList;
                    //     file.url = URL.createObjectURL(file.raw);
                }
            },
            uploadImage: function () {
                this.$refs.imageUploader.submit();
            },
            onUploadFail: function (err, file, fileList) {
                this.$message.error('出错了哦，请稍后重试');
            },
            viewResource: function (res) {
                if (res.url) {
                    window.open(res.url);
                }
            },
            deleteResource: function (res) {
                let vue = this;

                axios.delete('/admin/resource/' + res.id).then(resp => {
                    if (res.type === 'video') {
                        vue.loadVideo();
                    } else {
                        vue.loadImage();
                    }
                })
            }
        },
        mounted: function () {
            this.loadImage();
        }
    })
</script>
</html>